import React, { useEffect, useState } from 'react'
import { Table, Tag, Button, Space, Modal, Popover, Switch } from 'antd'
import {
  EditOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons'
import axios from 'axios'

const { confirm } = Modal

export default function RightList() {
  const [dataSource, setDataSource] = useState([])

  useEffect(() => {
    getTableList()
  }, [])

  const getTableList = () => {
    axios.get('/rights?_embed=children').then((res) => {
      console.log(res)
      const list = res.data
      // list[0].children=''
      list.forEach((i) => {
        if (i.children.length === 0) {
          i.children = ''
        }
      })
      setDataSource(list)
    })
  }

  const comfirmHandler = (item) => {
    confirm({
      title: '确定要删除吗?',
      icon: <ExclamationCircleOutlined />,
      content: 'Some descriptions',
      onOk() {
        deleteHandler(item)
      },
      onCancel() {
        console.log('Cancel')
      },
    })
  }
  const deleteHandler = (item) => {
    console.log(item)
    if (item.grade === 1) {
      axios.delete('/rights/' + item.id).then((res) => {
        console.log(res)
        getTableList()
      })
    } else {
      //   let target = dataSource.find((i) => {
      //     return i.id === item.rightId
      //   })
      //   console.log(target)

      axios.delete('/children/' + item.id).then((res) => {
        console.log(res)
        getTableList()
      })
    }
  }

  const switchHandle = (item, checked) => {
    if (item.grade == 1) {
      axios
        .patch('/rights/' + item.id, {
          pagepermisson: checked ? 1 : 0,
        })
        .then((res) => {
          getTableList()
        })
    } else {
      axios
        .patch('/children/' + item.id, {
          pagepermisson: checked ? 1 : 0,
        })
        .then((res) => {
          getTableList()
        })
    }
  }
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '权限名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '权限路径',
      dataIndex: 'key',
      key: 'key',
      render: (key) => {
        return <Tag color="gold">{key}</Tag>
      },
    },
    {
      title: '操作',
      render: (item) => {
        return (
          <div>
            <Space>
              <Button
                danger
                type="primary"
                shape="circle"
                icon={<DeleteOutlined />}
                onClick={() => comfirmHandler(item)}
              ></Button>

              <Popover
                content={
                  <Switch
                    checked={item.pagepermisson}
                    onChange={(checked) => {
                      switchHandle(item, checked)
                    }}
                  />
                }
                title="页面配置项"
                trigger={item.pagepermisson === undefined ? '' : 'click'}
              >
                <Button
                  type="primary"
                  shape="circle"
                  icon={<EditOutlined />}
                  disabled={item.pagepermisson ===undefined }
                ></Button>
              </Popover>
            </Space>
          </div>
        )
      },
    },
  ]

  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      pagination={{
        pageSize: 5,
      }}
    />
  )
}
